/**
 * 个人中心页面组件（占位符）
 */

// 导入 React 相关的 hooks
import React, { useEffect, useState } from 'react';
// 导入 Ant Design 组件库中的各种组件
import { Card, Avatar, Button, Tabs, List, Modal, Form, Input, Upload, message, Spin, Popconfirm } from 'antd';
// 导入 Ant Design 图标库中的图标
import { EditOutlined, LogoutOutlined, LockOutlined, UploadOutlined } from '@ant-design/icons';
// 导入自定义的状态管理库中的 useAuthStore hook
import { useAuthStore } from '@stores/auth';
// 导入认证服务模块
import AuthService from '../services/auth';
// 导入 API 服务模块中的相关函数
import { getMyProducts, getMyEvaluations, deleteProduct } from '../services/api';

/**
 * 个人中心页面组件
 * @returns {JSX.Element} 渲染个人中心页面的 JSX 元素
 */
export default function ProfilePage() {
  // 从 useAuthStore 中获取认证状态和退出登录的函数
  const { isAuthenticated, logout } = useAuthStore();
  // 定义用户状态，初始值为 null
  const [user, setUser] = useState(null);
  // 定义加载状态，初始值为 true
  const [loading, setLoading] = useState(true);
  // 定义编辑资料弹窗的显示状态，初始值为 false
  const [editVisible, setEditVisible] = useState(false);
  // 定义修改密码弹窗的显示状态，初始值为 false
  const [pwdVisible, setPwdVisible] = useState(false);
  // 定义用户发布的商品列表状态，初始值为空数组
  const [products, setProducts] = useState([]);
  // 定义用户的评价列表状态，初始值为空数组
  const [evaluations, setEvaluations] = useState([]);
  // 定义评价标签页的切换状态，初始值为 'received'
  const [evalTab, setEvalTab] = useState('received'); 
  // 创建编辑资料表单实例
  const [editForm] = Form.useForm();
  // 创建修改密码表单实例
  const [pwdForm] = Form.useForm();
  // 定义头像上传的加载状态，初始值为 false
  const [avatarUploading, setAvatarUploading] = useState(false)

  // 组件挂载时，调用 fetchUser 函数获取用户信息
  useEffect(() => {
    fetchUser();
  }, []);

  // 当用户信息或评价标签页切换时，调用 fetchProducts 和 fetchEvaluations 函数
  useEffect(() => {
    if (user && user.id) {
      fetchProducts(user.id);
      fetchEvaluations(evalTab);
    } else {
      setProducts([])
    }
  }, [user, evalTab]);

  // 当商品列表更新且为空时，在控制台输出调试信息
  useEffect(() => {
    if (products.length === 0) {
      console.log('我的发布 products 为空，user_id:', user?.id, '返回数据:', products)
    }
  }, [products, user]);

  /**
   * 获取当前用户信息
   * @returns {Promise<void>} 无返回值
   */
  async function fetchUser() {
    // 设置加载状态为 true
    setLoading(true);
    try {
      // 调用 AuthService 的 getCurrentUser 方法获取当前用户信息
      const res = await AuthService.getCurrentUser();
      // 更新用户状态（后端直接返回UserResponse对象，不是data.user）
      setUser(res.data || res);
      // 设置编辑资料表单的初始值
      const userData = res.data || res;
      editForm.setFieldsValue({ username: userData.username, avatar_url: userData.avatar_url });
    } catch (error) {
      console.error('获取用户信息失败:', error);
    } finally {
      // 设置加载状态为 false
      setLoading(false);
    }
  }

  /**
   * 获取用户发布的商品列表
   * @param {number} userId 用户 ID
   * @returns {Promise<void>} 无返回值
   */
  async function fetchProducts(userId) {
    // 如果用户 ID 为空，清空商品列表
    if (!userId) {
      console.warn('用户ID为空，清空商品列表');
      return setProducts([]);
    }
    try {
      // 调用 getMyProducts 函数获取用户发布的商品列表
      const res = await getMyProducts({ user_id: userId });
      // 兼容后端返回结构
      let products = [];
      if (res.data && res.data.success) {
        // 兼容 data.products 或 data.data.products
        if (Array.isArray(res.data.products)) {
          products = res.data.products;
        } else if (res.data.data && Array.isArray(res.data.data.products)) {
          products = res.data.data.products;
        } else {
          console.warn('未知的商品返回结构', res.data)
        }
      } else {
        console.warn('获取商品失败', res.data)
      }
      // 更新商品列表状态
      setProducts(products);
    } catch (e) {
      console.error('获取我的发布商品异常', e)
      // 发生错误时，清空商品列表
      setProducts([])
    }
  }

  /**
   * 获取用户的评价列表
   * @param {string} [type='received'] 评价类型，'received' 表示收到的评价，'sent' 表示发出的评价
   * @returns {Promise<void>} 无返回值
   */
  async function fetchEvaluations(type = 'received') {
    try {
      // 定义请求参数，使用role参数（后端my-reviews端点使用）
      const params = {};
      if (type === 'sent') {
        params.role = 'reviewer'; // 我评价别人的
      } else {
        params.role = 'reviewed'; // 别人评价我的
      }
      
      // 调用 getMyEvaluations 函数获取用户的评价列表
      const res = await getMyEvaluations(params);
      // 兼容后端返回结构（后端返回PaginatedResponse格式）
      let evals = [];
      if (res.data && res.data.success) {
        if (res.data.items && Array.isArray(res.data.items)) {
          evals = res.data.items; // PaginatedResponse格式
        } else if (res.data.data && Array.isArray(res.data.data)) {
          evals = res.data.data;
        } else if (Array.isArray(res.data)) {
          evals = res.data;
        }
      } else if (res.data && res.data.items) {
        // 直接返回PaginatedResponse格式
        evals = res.data.items || [];
      }
      // 更新评价列表状态
      setEvaluations(evals || []);
    } catch (error) {
      console.error('获取评价列表失败:', error);
      // 发生错误时，清空评价列表
      setEvaluations([]);
    }
  }

  /**
   * 显示编辑资料弹窗
   */
  const handleEdit = () => setEditVisible(true);

  /**
   * 处理编辑资料表单提交
   * @returns {Promise<void>} 无返回值
   */
  const handleEditOk = async () => {
    try {
      // 验证编辑资料表单字段
      const values = await editForm.validateFields();
      // 调用 AuthService 的 updateProfile 方法更新用户资料
      await AuthService.updateProfile(values);
      // 显示成功提示信息
      message.success('资料更新成功');
      // 隐藏编辑资料弹窗
      setEditVisible(false);
      // 重新获取用户信息
      fetchUser();
    } catch {}
  };

  /**
   * 显示修改密码弹窗
   */
  const handlePwd = () => setPwdVisible(true);

  /**
   * 处理修改密码表单提交
   * @returns {Promise<void>} 无返回值
   */
  const handlePwdOk = async () => {
    try {
      // 验证修改密码表单字段
      const values = await pwdForm.validateFields();
      // 调用 AuthService 的 changePassword 方法修改用户密码
      await AuthService.changePassword({ oldPassword: values.oldPassword, newPassword: values.newPassword });
      // 显示成功提示信息
      message.success('密码修改成功');
      // 隐藏修改密码弹窗
      setPwdVisible(false);
      // 重置修改密码表单
      pwdForm.resetFields();
    } catch {}
  };

  /**
   * 处理头像上传
   * @param {Object} param0 包含上传文件的对象
   * @param {File} param0.file 上传的文件
   * @returns {Promise<void>} 无返回值
   */
  const handleAvatarUpload = async ({ file }) => {
    // 设置头像上传加载状态为 true
    setAvatarUploading(true);
    try {
      // 这里可扩展为后端上传接口，暂用 base64
      const reader = new FileReader();
      reader.onload = e => {
        // 设置编辑资料表单中头像字段的值
        editForm.setFieldsValue({ avatar_url: e.target.result });
        // 设置头像上传加载状态为 false
        setAvatarUploading(false);
      };
      // 读取文件为 DataURL 格式
      reader.readAsDataURL(file);
    } catch {
      // 发生错误时，设置头像上传加载状态为 false
      setAvatarUploading(false);
    }
  };

  /**
   * 处理退出登录
   * @returns {Promise<void>} 无返回值
   */
  const handleLogout = async () => {
    // 调用 AuthService 的 logout 方法退出登录
    await AuthService.logout();
    // 调用 logout 函数更新认证状态
    logout();
    // 重定向到登录页面
    window.location.href = '/login';
  };

  // 如果处于加载状态或用户信息未获取到，显示加载动画
  if (loading || !user) return <Spin style={{ marginTop: 100 }} />;

  return (
    <div style={{ maxWidth: 900, margin: '32px auto', padding: 24 }}>
      <Card style={{ marginBottom: 24 }}>
        <div style={{ display: 'flex', alignItems: 'center' }}>
          {/* 显示用户头像 */}
          <Avatar size={80} src={user.avatar_url} style={{ marginRight: 24 }} />
          <div style={{ flex: 1 }}>
            {/* 显示用户昵称 */}
            <div style={{ fontSize: 22, fontWeight: 600 }}>{user.username}</div>
            {/* 显示用户邮箱 */}
            <div style={{ color: '#888', margin: '4px 0' }}>{user.email}</div>

          </div>
          {/* 编辑资料按钮 */}
          <Button icon={<EditOutlined />} onClick={handleEdit} style={{ marginRight: 12 }}>编辑资料</Button>
          {/* 修改密码按钮 */}
          <Button icon={<LockOutlined />} onClick={handlePwd} style={{ marginRight: 12 }}>修改密码</Button>
          {/* 退出登录确认弹窗 */}
          <Popconfirm title="确定要退出登录吗？" onConfirm={handleLogout} okText="确定" cancelText="取消">
            <Button icon={<LogoutOutlined />} danger>退出登录</Button>
          </Popconfirm>
        </div>
      </Card>
      <Tabs defaultActiveKey="products" items={[
        {
          key: 'products',
          label: '我的发布',
          children: (
            <Card>
              <List
                itemLayout="vertical"
                dataSource={products}
                locale={{ emptyText: '暂无发布商品' }}
                renderItem={item => {
                  // 自动补全图片 URL - 修复字段映射
                  let imageUrl = 'https://via.placeholder.com/300x200?text=No+Image';
                  
                  // 优先使用 images 字段（字符串数组格式）
                  if (item.images && item.images.length > 0 && typeof item.images[0] === 'string') {
                    const url = item.images[0];
                    if (url.startsWith('/uploads/')) {
                      imageUrl = url;
                    } else if (url.startsWith('uploads/')) {
                      imageUrl = '/' + url;
                    } else {
                      imageUrl = `/uploads/${url.replace(/^uploads[\\/]*/, '')}`;
                    }
                  }
                  // 其次使用 images_rel 字段（对象数组格式）
                  else if (item.images_rel && item.images_rel.length > 0 && item.images_rel[0].image_url) {
                    const url = item.images_rel[0].image_url;
                    if (url.startsWith('/uploads/')) {
                      imageUrl = url;
                    } else if (url.startsWith('uploads/')) {
                      imageUrl = '/' + url;
                    } else {
                      imageUrl = `/uploads/${url.replace(/^uploads[\\/]*/, '')}`;
                    }
                  }
                  // 最后使用旧的 ProductImages 字段作为后备
                  else if (item.ProductImages?.[0]?.image_url) {
                    const url = item.ProductImages[0].image_url;
                    if (url.startsWith('/uploads/')) {
                      imageUrl = url;
                    } else if (url.startsWith('uploads/')) {
                      imageUrl = '/' + url;
                    } else {
                      imageUrl = `/uploads/${url.replace(/^uploads[\\/]*/, '')}`;
                    }
                  }

                  return (
                    <List.Item
                      key={item.id}
                      extra={imageUrl && (
                        <img width={120} alt="商品图片" src={imageUrl} />
                      )}
                      actions={[
                        <Popconfirm
                          title="确定要删除该商品吗？"
                          okText="删除"
                          cancelText="取消"
                          onConfirm={async () => {
                            try {
                              // 调用 deleteProduct 函数删除商品
                              await deleteProduct(item.id);
                              // 显示成功提示信息
                              message.success('删除成功');
                              // 刷新当前用户发布的商品列表
                              fetchProducts(user?.id); 
                            } catch {
                              // 显示失败提示信息
                              message.error('删除失败');
                            }
                          }}
                        >
                          <Button danger size="small">删除</Button>
                        </Popconfirm>
                      ]}
                    >
                      <List.Item.Meta
                        title={<a href={`/products/${item.id}`}>{item.title || item.name}</a>}
                        description={<>
                          <span>￥{item.price}</span> | <span>{item.category?.name || item.Category?.name}</span> | <span>{item.status}</span> | <span>{item.user?.nickname || item.user?.username || item.User?.nickname || item.User?.username || '匿名用户'}</span>
                        </>}
                      />
                      <div style={{ color: '#888' }}>{item.description?.slice(0, 60)}</div>
                    </List.Item>
                  )
                }}
              />
            </Card>
          )
        },
        {
          key: 'evaluations',
          label: '我的评价',
          children: (
            <Card>
              {/* 评价标签页切换 */}
              <Tabs activeKey={evalTab} onChange={setEvalTab} items={[
                { key: 'received', label: '收到的评价' },
                { key: 'sent', label: '我发出的评价' }
              ]} />
              <List
                itemLayout="vertical"
                dataSource={evaluations}
                locale={{ emptyText: evalTab === 'sent' ? '暂无发出评价' : '暂无收到评价' }}
                renderItem={item => (
                  <List.Item key={item.id}>
                    <List.Item.Meta
                      avatar={
                        (item.is_anonymous === 1 || item.is_anonymous === true || item.is_anonymous === '1')
                          ? undefined
                          : (
                              <Avatar src={
                                evalTab === 'sent'
                                  ? user.avatar_url
                                  : (item.fromUser?.avatar_url || item.toUser?.avatar_url)
                              } />
                            )
                      }
                      title={
                        (item.is_anonymous === 1 || item.is_anonymous === true || item.is_anonymous === '1')
                          ? '匿名'
                          : (
                              evalTab === 'sent'
                                ? (item.toUser?.username || item.evaluatedUser?.username || item.evaluated_id)
                                : (item.fromUser?.username || item.evaluator_id)
                            )
                      }
                      description={<>
                        <span>评分：{item.overall_score || item.rating}星</span> | <span>{item.created_at?.slice(0, 10)}</span>
                      </>}
                    />
                    <div>{item.comment}</div>
                  </List.Item>
                )}
              />
            </Card>
          )
        }
      ]} />
      {/* 编辑资料弹窗 */}
      <Modal
        title="编辑资料"
        open={editVisible}
        onOk={handleEditOk}
        onCancel={() => setEditVisible(false)}
        okText="保存"
        cancelText="取消"
      >
        <Form form={editForm} layout="vertical">
          <Form.Item name="username" label="昵称" rules={[{ required: true, min: 3, message: '昵称至少3个字符' }]}> 
            <Input placeholder="请输入昵称" />
          </Form.Item>
          <Form.Item name="avatar_url" label="头像">
            <Input placeholder="头像URL或上传" />
            <Upload showUploadList={false} customRequest={handleAvatarUpload}>
              <Button icon={<UploadOutlined />} loading={avatarUploading} style={{ marginTop: 8 }}>上传头像</Button>
            </Upload>
            {editForm.getFieldValue('avatar_url') && (
              <Avatar src={editForm.getFieldValue('avatar_url')} size={64} style={{ marginTop: 8 }} />
            )}
          </Form.Item>
        </Form>
      </Modal>
      {/* 修改密码弹窗 */}
      <Modal
        title="修改密码"
        open={pwdVisible}
        onOk={handlePwdOk}
        onCancel={() => setPwdVisible(false)}
        okText="保存"
        cancelText="取消"
      >
        <Form form={pwdForm} layout="vertical">
          <Form.Item name="oldPassword" label="原密码" rules={[{ required: true, message: '请输入原密码' }]}> 
            <Input.Password placeholder="请输入原密码" />
          </Form.Item>
          <Form.Item name="newPassword" label="新密码" rules={[{ required: true, min: 6, message: '新密码至少6位' }]}> 
            <Input.Password placeholder="请输入新密码" />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
} 